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Your ability to navigate the World Wide Web with a browser is a useful 
skill. By mastering just a few more basic concepts, you also can create 
and publish your own Web pages. You can add content to the Web by 
learning Hypertext Markup Language (HTML), the language in which 
all pages on the Web are written. == Grace Dekmejian works in the 
Information Systems department at Nomad Ltd, a travel and sporting 
goods company. One of her new projects is to create a Web site for the 
company. 


Understanding HTML 


HTML is the standard language used for all pages on the World Wide Web. It allows various com- 
HTML puter systems to interpret the information on the Web in the same way. A Web page, also called an 
a HTML document or an HTML file, is simply a text file made up of text and HTML instructions. 
Each of these instructions is commonly referred to as a tag. In general, HTML works by surround- 
ing each page element—such as a heading, or the text for a table—with a pair of tags. The first tag 
indicates the beginning of a specific feature, such as boldface for text. The second tag marks the 
location in your document where the feature ends. Figure A-1 shows an example of the 
<H1>..</HI1> tag pair in an HTML document. This tag pair formats text as a heading. HTML 
includes hundreds of different tags, which allow you to describe the way you want each of your 
Web page elements to appear in browsers. Figure A-2 shows the appearance in a browser of the H1 
text from Figure A-1. Ø= Grace needs to design and create a Web site that is easy to use, so 
Nomad Ltd customers easily can find information on its products and services. HTML includes 
many design features for Grace to make her pages intuitive and engaging, such as: 


Text formatting 

HTML allows you to format text with some of the same features found in popular word proces- 
sors. Those features include various type sizes and fonts, and enhancements such as bold and 
italics. 


A>) Hyperlinks 
In your own experience using the Web, you've probably moved from one Web page to another 
using links. Links, or hyperlinks, are Web site addresses (called uniform resource locators or 
URLs) that are coded into an HTML document. Clicking a link opens its target Web page, 
allowing users an easy way to pursue the information they find most useful or interesting. 


A Tables and lists 


A table often can be the most concise way to present information. HTML allows you to organize 
information in tables, and to format various table aspects, including borders and background 
color. You also can create simple bulleted or numbered lists with HTML. 


A>) Graphics, sound, and video support 
Good Web pages make judicious use of graphics to balance text content. HTML allows you to 
easily add graphics, and it offers options to control a graphic’s appearance in the browser win- 
dow. You also can add code to Web pages that integrates sound and video with a page’s text and 
graphics, creating multimedia. The availability of these features broadens the palette available 
to you when designing Web pages. 


FIGURE A-1: <H1>..</H1> tag pair in HTML document 
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FIGURE A-2: Appearance of HTML document in a Web browser 
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Planning an HTML 


Document 


Before writing an HTML document, you should have a preliminary idea of how you want your 
final Web page to look. Although you'll inevitably modify your initial page format, a master plan 
helps keep you focused on the information you want to convey. fis: Grace used the Web to 
research the HTML document-creation process. She found a list of suggested steps for planning 
and creating a Web page: 


Sketch your Web page 

Create a rough sketch showing how you want your final Web page to look. The goal of this 
process—which is called story boarding—is to show the elements you want to include and how 
you want them arranged on the Web page. You then can make sure you know how to use or 
implement the necessary tags for each element, and you can research parts of your design that 
you haven't used before. Grace created a sketch of the first few elements she wants to add to her 
Nomad Ltd Web page. Her drawing is shown in Figure A-3. 


Enter structuring tags for the file 

Every Web page begins and ends with common tags that identify it as an HTML document and 
provide basic information about it to the browser. A Web page usually contains tags to divide it 
into a number of main sections. 


Enter each Web page element, along with its formatting tags 

The most common Web page elements are the text that is shown on the screen, and the refer- 
ences to files containing graphics. You can enter tags to add special formatting to text, to create 
tables, or to add links to other Web pages. It’s generally best to add one new element at a time, 
and then preview the Web page; if the page doesn’t appear as expected, you then have a good 
idea of which HTML tag or tag pair is likely to contain the error. 


Preview the Web page 

While creating your page, you should examine it often by using a Web browser, as shown in 
Figure A-4. These previews allow you to notice any elements that don’t appear as you intended. 
Correcting errors often can be as simple as adding or editing an HTML tag. Because different 
Web browsers, such as Microsoft Internet Explorer or Netscape Navigator, sometimes display 
the same code differently, it’s best to preview your work in multiple browsers to ensure that it 
appears as you planned for all users. 


Test links 

If your document contains links to other Web pages, preview your page in a Web browser and 
test each link by clicking it. If clicking a link does not open the Web page you intended as the 
target, you can edit the code. 


FIGURE A-3: Grace’s sketch for the Nomad Ltd Web page ~] 
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FIGURE A-4: Web page previewed in a Web browser 
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Use a plain text editor, such 

as Notepad or WordPad, to 

ensure results like those 

found in these lessons. 2 


> 3. 


Be sure not to use the “Save 
as HTML” command if you 

are creating your HTML docu- 4. 
ment in a word processor. 5 


D 6. 


Some text editors automati- 

cally add the .txt extension 

to your filename when you 

select it; double-check your 1. 
filename to make sure it 

ends with .htm. 


CA. Writing an HTML 


am | Document 


Once you've planned how you want your document to look, you can start creating its structure 
and adding page elements. You can create an HTML document in any application that allows 
you to enter and save text. Notepad and WordPad, which are text editor programs installed along 
with Windows, are popular tools for hand-coding HTML. These applications include simple 
methods of saving a document in text format, without the additional formatting added by some 
word processors. @fmæ» Grace decides to create her HTML document using Notepad. She 
begins the Nomad Ltd Web page by entering the structuring tags and adding some basic page 
elements. 


Click Start on the taskbar, point to Programs, point to Accessories, click Notepad, 


then maximize the screen, if necessary 
A blank Notepad document opens. 


. Insert your Project Disk in the appropriate drive 


Click File on the menu bar, then click Save 
The Save As dialog box opens. See Figure A-5. 


Click the Save in list arrow, then select the location of the Project Disk 


. select the text in the File name text box, then type nomad-a.htm to replace the 


default filename 


Make sure Text Documents appears in the Save as type list box, then click Save 
The Save As dialog box closes, and the filename appears in the title bar at the top of the 
document. 


Type <HTML> then press [Enter] 

Every HTML document begins with the <HTML> tag, and ends with the </HTML> tag. 
This tag pair identifies the document’s contents as HTML to the Web browser. Table A-1 
illustrates this tag pair, along with the other common structural tags. A browser can inter- 
pret HTML tags that are in either uppercase or lowercase. However, to make your Web doc- 
uments easy for yourself and others to edit, it’s best to consistently use either all uppercase 
or all lowercase. 


. Type the remaining text shown in Figure A-6 


You can use uppercase and lowercase letters, line spaces, tabs, and hard returns to make your 
HTML document easier to read without affecting its appearance as a Web page. Your Web 
document should match the one shown in Figure A-6. 


Make sure you 
include the cor- 
rect location of 
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Replace with 
document name 


FIGURE A-5: Save As dialog box 
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FIGURE A-6: Nomad Ltd Web page HTML code 
<HTML> 


<HEAD> 
<TITLE>Nomad Ltd</TITLE> 
</HEAD> 


<BODY> 

Nomad Ltd 

lbutside Looking Out 
</BODY> 


</HTML> 


TABLE A-1: HTML structuring tag pairs 


tag pair 


<TITLE>..</TITLE> 


<BODY>..</BODY> 


| purpose 


Formats the document title, which appears in the browser’s title bar. 
Identifies the document's body area, which contains the Web page contents that appear in the browser window. 


(A) Previewing and 
am | Editing a 
Web Page 


HTML includes many tags that allow you to format text. Two of the most basic, <BR> and <P>, 
allow you to control the space between lines of text and where those lines break on the screen, as 
explained in Table A-2. Some of the most efficient tags for formatting text are the six tag pairs 
designed for headings, and are described in Table A-3. Text formatted with the heading tags 
appears with slight differences in different Web browsers. You can get a rough idea of how your 
Web page will look to users by periodically opening your HTML document in a browser during 
the creation process. However, as with all HTML tags, the best way to make sure your Web page 
appears as you intended is to preview it in all of the most common Web browsers. @jfqgum=: Grace 
wants to format the company name with a heading that calls attention to it. She also wants to see 
how her Web page appears in a browser. 


1. Click to the left of the word Nomad at the top of the body section of the document, type 
<H1>, press [End] to move the insertion point to the end of the line, then type </H1> 
The H1 tag formats the company name using the largest size heading. The opening tag, 
<H1>, begins the H1 format just before the word Nomad starts, and the closing tag, </H1>, 
ends this format after the end of the company name. 

2. Click to the left of the word Outside, type <H3>, press [End] to move the insertion 
point to the end of the line, then type </H3> 
The H3 tags format the company slogan smaller than the company name. Compare your 
document with Figure A-7. 


3. Save your work 


QuickTip 4. Start your browser, cancel any dial-up operations, then open the file nomad-a.htm 
To open a Web page from your A Web browser can open a Web document from any location to which it has access, including 
local disk on most browsers, your local hard drive or floppy drive. Compare your page with Figure A-8. Notice that just 
click File on the Menu bar, like the <P> tag, the heading tags add a blank line before and after the current paragraph. 
click Open or Open Page, 5. Click the text editor program button on the taskbar 


lick B Choose File, 
aka the file click Open, 6. Change the <H3> tag to <H4>, then change the </H3> tag to </H4> 


then click Open or OK. Grace wants the size of the slogan decreased, so you will use a heading tag with a smaller size. 
7. Save your work, click the browser program button on the taskbar, then click the 


browser's Refresh or Reload button 
The browser opens the most recent version of the Web page saved to disk, as shown in Figure A-9. 


8. Click the text editor program button on the taskbar 
TABLE A-2: Basic HTML text tags 


tag | description | sample | result in browser 
<BR> adds a line break; does not require a paragraph 1 paragraph 1 
closing tag <BR> 
paragraph 2 paragraph 2 
<P> adds a blank line before and after the <P>paragraph 1 paragraph 1 
current paragraph; does not require a 
closing tag <P>paragraph 2 paragraph 2 


FIGURE A-7: Web page source containing heading tags 


<HTML> 


<HEAD> 
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Heading 1 tag </HEAD> 

pair added 
<BODY> 
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FIGURE A-8: Web page formatted with heading tags 
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FIGURE A-9: Web page reflecting heading tag edits 
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TABLE A-3: HTML headings 


tags | sample | result 


<H1>..</H1>  <Hl>Heading 1</H1> Heading 1 


<H2>..</H2> <H2>Heading 2</H2> Heading 2 
<H3>..</H3>  <H3>Heading 3</H3> Heading 3 


<H4>..</H4> <H4>Heading 4</H4> Heading 4 


<H5>..</H5> <H5>Heading 5</H5> Heading 5 


<H6>..</H6> <H6>Heading 6</H6> Heading 6 


CA. Creating Links to 
cum | Other Web Pages 


One defining feature of HTML documents is the ability to move from one Web page to another 
using links. A link, or hyperlink, is a specially formatted Web page object that the user can click 
to open a different Web page, known as the target. The target often is located in the same group 
of Web pages, or Web site, as the original document, and the links serve as an easy way for a user 
to find specific information among those pages. However, many Web pages also include links to 
pages on other Web sites. For example, when you submit a search to a search engine, the results 
page displays links to other sites that may contain the information you want. @jfjgmme= Grace 
plans to create separate Web pages for Nomad’s two divisions, as well as a page describing the 
company’s history. She adds the links between these pages to the layout she is developing. 


1. Click to the right of the </H4> tag, then press [Enter] twice 


2. Type <A HREF="construction.htm">sporting gear</A>, then press [Enter] 

The HTML for Grace’s link uses the <A>..</A> tag pair, which is short for “anchor.” She 
also uses the HREF attribute. Attributes are extra settings available in most HTML tags, and 
allow you to add to or change a tag’s default features. Grace uses the equal sign to set the 
value of the HREF attribute equal to the location of the file to open. Because Grace has not 
yet created the Web document that eventually will be the target for this link, she references a 
placeholder file called construction.htm. A placeholder is a simple document containing 
text explaining that the Web page is incomplete. Table A-4 explains a few of the possible tar- 
gets for the HREF attribute. 


3. Type <BR>, press [Enter], type <A HREF="construction.htm">adventure travel</A>, 
then press [Enter] 

4. Type <BR>, press [Enter], then type <A HREF="construction.htm">about Nomad 
Ltd</A> 


Compare your document with Figure A-10. 


5. Save your work, then click the browser program button on the taskbar 
The browser displays the last version of the document that you opened. It does not reflect 
your most recent changes. 


6. Click the Refresh or Reload button 


The browser now displays the most recent version of your document, as shown in Figure A-11. 
The linked text is underlined and appears in blue. 


7. Click one of the links 


If the construction page The construction page opens in the browser, informing you that the page is not yet 


does not open in your completed. 

browser, heck to make sure, Click the browser’s Back button, then click the text editor program button on the 
construction.htm files are taskbar 

saved in the same location. 


TABLE A-4: Selected values for the <A>..</A> tag pair HREF attribute 


value | description 
http://filename opens a file located on a network, such as the Internet 
filename opens a file in the same location as the current file 


mailto:e-mail address creates a new outgoing message in the default e-mail program, using the given address 


Codes for line 
breaks 


FIGURE A-10: Web page source containing link information 


<HTML> 


<HEAD> 
<TITLE>Nomad Ltd</TITLE> 
</HEAD> 


<BODY> 
<H1>Nomad Ltd</H1> 
<H4>Outside Looking Out</H4> 


<A HREF=“construction.htm">sporting gear</A> 
<BR> 

<A HREF="construction.htm">adventure travel</A> 
<BR> 

KA HREF="construction.htm">about Nomad Ltd</A> 
</BODY> 


</HTML> 


FIGURE A-11: Web page displaying linked text 
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Codes for linked text 
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Printing an HTML 


= „am | Document 


Even though HTML documents are designed to facilitate information exchange over the 
Internet, sometimes you need to print hard copies. You can print the HTML code, or source, of 
your pages using the same text editor you used to create them. Web browsers also allow you to 
print your Web pages as they appear in the browser window. Qf» Grace wants to bring her 
preliminary work on the Nomad Ltd Web page to her team meeting later today. She prints both 
the HTML source and the Web browser display. 


1. In your text editor, click File, then click Print 
The text editor prints a single copy of the source, as shown in Figure A-12. 


2. Click the browser program button on the taskbar 
3. Click the Print button on the toolbar, then, if necessary, click OK 


The page prints as it appears in the browser window, as shown in Figure A-13. 
4. Click the browser window Close button 


5. If necessary, click the text editor program button on the taskbar, then click the text 
editor window Close button 


> HTML A-12 CREATING AN HTML DOCUMENT 


FIGURE A-12: Printed source for Nomad Ltd Web page ~] 


nomad-a.htm 


<HTML> 


<HEAD> 
<TITLE>Nomad Ltd</TITLE> 
</HEAD> 


<BODY> 
<H1>Nomad Ltd</H1> 
<H4>Outside Looking Out</H4> 


<A HREF="construction.htm">sporting gear</A> 
<BR> 

<A HREF="construction.htm">adventure travel</A> 
<BR> 

<A HREF="construction.htm">about Nomad Ltd</A> 
</BODY> 


</HTML> 


Page 1 


FIGURE A-13: Printed browser display of Nomad Ltd web page 
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™ Practice 


> Concepts Review | 


Name the function of each marked element of the Notepad screen shown in Figure A-14. 


FIGURE A-14 


Match each statement with the term that it describes. 


6. An instruction in HTML a. <IITLE>..</TITLE> 

7. Tag pair surrounding Web page contents that appear in the browser b. <BODY>..</BODY> 
window c. Tag 

8. Tag pair for text to appear in the browser’s title bar d. Target 

9. The Web page opened by a link e. Source 


10. The HTML code used to create a Web page 


Practice 


Select the best answer from the list of choices. 


11. If you wanted to reduce the text size of a Heading 4, which tag pair would you use? 
a. <HEAD>..</HEAD> 
b. <H3>..</H3> 
Cy hb ne 
d. <BR>..</BR> 


1 


N 


. When typing HTML tags, you should type the tags using 
a. uppercase for the opening tag; lowercase for the closing tag. 
b. either uppercase or lowercase. 
c. uppercase only. 
d. lowercase only. 


13. Which menu is used to open a local file in a browser? 
a. Format 
b. View 
c. Edit 
d. File 


14. HTML stands for 
a. HyperText Markup Language. 
b. HyperText Modern Language. 
c. HyperTool Modern Linkage. 
d. HyperTool Markup Linkage. 


15. In what situation would you use a placeholder? 
a. In place of a tag, when you’re not sure which tag to use 
b. When you have no code to enter into the body section 
c. When you want to format a link, but haven’t yet created the target page 
d. In place of your company name, when you want the page to remain anonymous 


16. Which tag pair marks the beginning and the end of an HTML document? 
a. <BODY>..</BODY> 
b. <HTML>..</HTML> 
6, le LE 
d. <HEAD>..</HEAD> 


| HTML | Practice 


17. Which tag pair marks an element that you see in the browser’s title bar? 
a. <BODY>..</BODY> 
b. <HTML>..</HTML> 
cE ESSES 
d. <HEAD>..</HEAD> 


18. Which of the following are not structuring tags? 
a. <BODY>..</BODY> 
b. <HTML>..</HTML> 
@ ES AES 
d. <HEAD>..</HEAD> 


19. Which HTML tag creates a new paragraph? 
a. <NEW> 
b. <P> 
c. <PARA> 
d. <NP> 


B Skills Review 


1. Write an HTML document. 
a. Start your text editor with a blank document. 
b. Save your work as a text document called cco-a.htm. 


c. Enter the HTML code shown in Figure A-15. FIGURE A-15 
<HTML> 
2. Preview and Edit an HTML document. <HEAD> 


a. Format the text “Crystal Clear Opticals” in the body a Clear Opticals</TITLE> 

section as a level 1 heading. 

b. Format the text “Visionary Eyewear for 50 Years” in — |<BODY> , 

the body section as a level 2 heading. a r eae 

c. Save your work. </BODY> 

d. Open your browser, then open the file cco-a.htm. </HTML>] 

e. Open the HTML document in your text editor, then 
change the level 2 heading to a level 3 heading. 
Save your work. 

. Reload the page in your browser to see the effect of the heading size change. 


(a) 
Q > 


. Create links to other Web pages. 
a. In your text editor, on the line below the text “Visionary Eyewear for 50 years”, add the text “Basic Styles” and 
link it to the placeholder file construction.htm . (Hint: Use the <A>..</A> tag pair with the HREF attribute.) 
b. On the next line, add a line break, then add the text “Designer Lines” and link it to the construction.htm file. 
c. On the next line, add a line break, then add the text “Eye Health Tips” and link it to the construction.htm file. 
d. On the next line, add a line break, then add the text “About Us” and link it to the construction.htm file. 


> HTML A-16 CREATING AN HTML DOCUMENT 


Practice 


e. Save your work. 
f. Reload the page in your browser to display the latest version of the document. 
g. Click one of the links to view the construction page. 


4. Print an HTML document. 
a. In your text editor, print the HTML document. 
b. In the browser program, print the Web page. 
c. Close the browser window. 
d. If necessary, close the text editor program. 


B Independent Challenges | 


J. You have recently started a consulting business called Star Dot Star. It is a priority for you to provide a Web site so 
potential clients can research your available services and business history. Using the skills you learned in this unit, plan 
and create a Web page for your consulting firm. Use a text editor to write your HTML tags, then use your browser to 
view the finished page. Your page should include at least two headings, as well as links to other Web pages or sites. 

To complete this independent challenge: 


. Create a sketch of your Web page, including a page title, at least two headings, and two or more links. 

. On your sketch, define which HTML tags you will use for each page element. 

. Start your text editor and enter the structuring tags for the page, along with the title and heading elements. 

. Save your work as sds-a.htm. 

. Preview your page in your Web browser, then edit the source, if necessary, to format the page as you want it to 
appear. 

f. Edit your HTML document to include links, using construction.htm as the target, then save the file and preview 

it in your browser. 
g. Print the document in your text editor and in your browser. 


onaowon. 


HTML | Practice 


P. You have volunteered to help create a Web page for your employer, Metro Water, the local water department. The 
priority for your Web page development team is to create an information source of your community’s water resources. 
Because you are familiar with the topic of water resources in your area and with HTML, you've volunteered to sketch 
the page and share your knowledge of HTML to structure the document and add basic elements. 

To complete this independent challenge: 


a. Create a sketch that includes the items you want to include on your Web page, along with the HTML tags you'll 
use to create each item. 

b. Start your text editor and enter the structuring tags for the page, along with the title and the heading elements, 
then save your file as mw-a.htm. 

c. Preview your page in your browser, then edit the source, if necessary, to format the page as you want it to 
appear. 

d. Edit your HTML document to include links, using construction.htm as the target, then save the file and preview 
it in your browser. 

e. Print the document in your text editor and in your browser. 

f. Exit your text editor and browser. 


RY : J. In this unit you have practiced using basic HTML tags to create some of the fundamental ele- 
Q , ments of a Web page. As you learn more tags and their functions, you will be able to add different 
Ly elements and formats to your Web pages. The Web itself can be one of the most useful tools for learn- 
= ~ ing more about HTML. Try it out by seeing what you can find on the Web about a tag or a tag pair that 

» you haven't used yet. 
To complete this independent challenge: 


a. Connect to the Internet, and use your browser to go to one of the following online HTML references: 
WWW.W3.org 
hotwired.lycos.com/webmonkey 
www.webreference.com 
If you have trouble locating these pages, go to www.course.com, navigate to the page for this book, click the link 
for the Student Online Companion, click the link for this unit, and use the links listed there as a starting point 
for your search. 
b. Click the link for HTML if you see one, then use the site’s search utility to find information about one of the fol- 
lowing tag pairs: 
<U>..</U> 
</> 
<OL>..</0L> 
<UL>..</UL> 
c. Print at least two pages that discuss what the selected tag does, and how you use it in Web page code. 
d. Write a paragraph about your selected tag. Include the following information: 
e Its name (what the letters in the tag stand for) 
e What feature(s) it adds to a Web page 
- An example of where in Web page design you think the selected tag would be useful 


Practice 


wok AL. As you begin to use your HTML skills to create Web pages and learn more tags for adding and for- 
Í matting page elements, the underlying design of your pages will become increasingly important. 

Organizing and designing your pages well is crucial to ensuring users can easily locate needed informa- 

œ~ tion. One of the most basic sources of design ideas is published Web pages. Use the Web to find exam- 

ples of effective Web pages, then print those pages. Identify familiar HTML tags, and describe the 

advantages and drawbacks of each page’s design. 

To complete this independent challenge: 


4 


a. Connect to the Internet, and use your browser to open Web pages that interest you, or that you are familiar with. 
If you need help finding particular pages, try a search engine, such as: 
- Google (www.google.com) 
> Alta Vista (www.altavista.com) 
- Yahoo (www.yahoo.com). 
If you have trouble locating a search engine, go to www.course.com, navigate to the page for this book, click the 
link for Student Online Companion, click the link for this unit, and use the links listed there as a starting point 
for your search. 

b. Print pages from at least three Web sites. Be sure to view the page source for each Web site. 

c. On your printouts, indicate familiar elements (such as titles, headings, empty lines, and paragraphs of text) as 
well as the tag you think was used to create each element. 

d. For each page you printed, list at least two design aspects that you think make the page functional (such as 
placement of elements, colors, and text phrasing). Be sure to refer to specific elements of each page. 

e. For each page you printed, list at least one aspect that could be improved. Write a paragraph describing how 
you would improve the design of each Web page. 

f. If necessary, disconnect from the Internet. 


o Practice 


> Visual Workshop 


You work at a small bookstore called Touchstone Booksellers. You want to convince the owner that she could ee a 
wider audience by conducting some of her business on the Web. You decide to use the HTML skills you have learned to 
create a basic Web page, to illustrate the benefits of Web commerce. Create the Web page shown in Figure A-16. Be sure 
to include HTML code in your document to display the business name in the browser’s title bar. Save your HTML file 
as a text document called tsb-a.htm, then print the document in your text editor and in your browser. 


FIGURE A-16 


Touchstone Booksellers 


Specializing in nonfiction of all types 


a locally-owned, independent bookstore since 1948 


Search our stock 
Place an order 
Out-of-print searches 


Events calendar 
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